<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
    <title>随机题目刷题</title>
    <script src="./jquery-3.6.0.min.js"></script> <!-- 引入jQuery库，用于简化AJAX和其他DOM操作 -->
</head>
<body>

<h2>随机练题</h2>
<form id="quizForm"> <!-- 主表单，用于组织题目及选项 -->
    <p id="question"></p> <!-- 用于动态显示题目内容 -->
    
    <!-- 单选题选项，使用radio类型input，确保只能选择一个答案 -->
    <input type="radio" name="selectedOption" value="A"> A: 
    <label for="optionA" id="optionALabel"></label><br> <!-- 选项A及其标签 -->
    
    <input type="radio" name="selectedOption" value="B"> B: 
    <label for="optionB" id="optionBLabel"></label><br> <!-- 选项B及其标签 -->
    
    <input type="radio" name="selectedOption" value="C"> C: 
    <label for="optionC" id="optionCLabel"></label><br> <!-- 选项C及其标签 -->
    
    <input type="radio" name="selectedOption" value="D"> D: 
    <label for="optionD" id="optionDLabel"></label><br> <!-- 选项D及其标签 -->
</form>
<p>
    <!-- 按钮，点击后显示答案及解析 -->
    <button id="showAnswer">查看答案 & 解析</button>
    
    <!-- 按钮，点击后加载新题目 -->
    <button id="nextQuestion">再来一题</button>
</p>
<div id="answerAnalysis" style="display:none;"></div> <!-- 用于显示答案和解析，初始隐藏 -->

<script>
$(document).ready(function() { // 确保DOM加载完毕后再执行以下脚本
    function loadQuestion() {
        $.getJSON('read_questions.php', function(data) { // AJAX请求获取随机题目数据
            $('#question').text(data.question); // 更新题目文本
            $('#optionALabel').text(data.optionA); // 更新选项A的文本
            $('#optionBLabel').text(data.optionB); // 更新选项B的文本
            $('#optionCLabel').text(data.optionC); // 更新选项C的文本
            $('#optionDLabel').text(data.optionD); // 更新选项D的文本
            $('#answerAnalysis').text(`答案: ${data.answer}\n解析: ${data.analysis}`).hide(); // 准备答案和解析，但保持隐藏
        });
    }

    loadQuestion(); // 页面加载时加载第一道题目

    $('#showAnswer').click(function() { // 查看答案按钮点击事件
        $('#answerAnalysis').toggle(); // 切换答案和解析的显示状态
    });

    $('#nextQuestion').click(function() { // 再来一题按钮点击事件
        loadQuestion(); // 加载新题目
        $('#answerAnalysis').hide(); // 隐藏答案和解析
        $('input[type="radio"]').prop('checked', false); // 清除所有单选按钮的选择状态
    });
});
</script>

</body>
</html>